import BaseView from "../baseView.js";
export default class AddUser extends BaseView {
  render() {
    $('#Content').html(`
        <div style="margin: 30px 10px 0 20px " id='nav'>
        <span class="layui-breadcrumb">
            <a>用户管理系统/</a>
            <a>用户资料管理/</a>
            <a>新增用户数据列表</a>
         </span>
         <hr/>
        </div>
        <h1 style="margin: 10px 10px 0 20px ">新增用户</h1>
        <hr/>
        <div style='width:300px;margin:auto'>
        <form class="layui-form" action="" lay-filter="formTest" >
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入用户账号" autocomplete="off"
                    class="layui-input" id="student_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                    class="layui-input" id="student_age">
            </div>
        </div>
       
        <div class="layui-form-item" style='margin-left: 110px;'>
        <!-- 上传图片 -->
        <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list" style="width:100px;height:100px;border:1px #ccc solid">
          <img class="layui-upload-img" id="demos"  style="width:100px;height:100px;">
          <p id="demoText"></p>
        </div>
         </div>  
        </div>   
       
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='addBtn' class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>
        </div>
        `)
  }
  handle() {
    $("script[type='module']").append(`
        <script>

        //Demo
        layui.use(['element','form','upload'], function(){
            var $ = layui.jquery,
            upload = layui.upload,
            layer = layui.layer;
            var form = layui.form,
            element = layui.element;
            element.render('#nav')
            form.render();
            $("#demos").attr("src","../../images/defaultphoto.jpg");
          //常规使用 - 普通图片上传
                  var uploadInst = upload.render({
                    elem: '#test1'
                    ,url: '/reg' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    ,auto:false //不自动上传
                    ,bindAction:"#addBtn" //绑定一个按钮来触发上传
                    // 传入的其他的参数（除了文件以后的参数）
                    ,data:{
                      name:()=>$("#student_name").val(),
                      pwd:()=>$("#student_age").val(),
                    }
                    ,choose: function(obj){
                      //预读本地文件示例，不支持ie8
                      console.log(obj);
                      obj.preview(function(index, file, result){
                        $('#demos').attr('src', result); //图片链接（base64）
                      });
                    }
                    ,done: function(res){
                      //如果上传失败
                      if(res.code > 0){
                        // return layer.msg('上传失败');
                        alert('上传失败');
                        upload.render()
                      }
                      //上传成功的一些操作
                     else{
                       if($("#student_name").val() && $("#student_age").val()){
                           alert("上传成功");
                           window.location.hash = '#/main/UserInfo'
                         }else{
                          alert('请输入密码或者账号');
                         }
                     }
                    }
                    ,error: function(){
                      //演示失败状态，并实现重传
                      var demoText = $('#demoText');
                      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                      demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                      });

                }
            })

          
            });
            
        </script>
        `)
  }
}